<template>
	<view class="product" v-if="!no_product && data.id">
		<view class="nav nav_bar flex_r_between"
			:style="`background: rgba(255, 255, 255,${trans});padding-left: 32rpx;padding-right: 32rpx;`">
			<view style="width: 30px;height: 30px;background-color: rgba(0, 0, 0,0.3);border-radius: 15px;"
				class="flex_r_around" @click="back">
				<uni-icons type="back" size="20" color="#FFF"></uni-icons>
			</view>

			<view style="width: 30px;height: 30px;" @click="onShare">
				<image :src="$util.prefix('public/share_icon.png')" mode="aspectFill" style="width: 30px;height: 30px;">
				</image>
			</view>
		</view>

		<view class="header_banner">
			<swiper class="swiper-box" @change="change" :current="current">
				<swiper-item v-for="(item, index) in data.goods_image" :key="index">
					<image @click="$util.previewImage(data.goods_image , index)" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="current" v-if="data.goods_image">
				{{current+1}}/{{data.goods_image.length}}
			</view>
		</view>

		<view class="banner_preview">
			<scroll-view scroll-x="true">
				<view class="banner_list flex_center">
					<image :src="item" mode="aspectFill" v-for="(item,index) in data.goods_image" :key="index"
						:id="index == current ? 'select' : ''" @click="current = index"></image>
				</view>
			</scroll-view>
		</view>

		<view class="goods_name_view">
			<view class="goods_name">{{data.name}}</view>
			<view class="price flex_r_between">
				<view class="price_text flex_center">
					<view class="flex_center">
						<i>￥</i>{{ data.isVip == 1 ? data.vip_price : data.price }}
					</view>
					<view class="vip-tags" v-if="data.isVip == 1">
						会员价
					</view>
				</view>
				<view class="order_num">售出 {{data.order_num}}</view>
			</view>
			
			<view class="old-price" v-if="data.isVip == 1">
				原价:¥{{ data.price }}
			</view>
		</view>

		<view class="liner"></view>

		<view class="goods_tags_view">
			<view class="tags">
				商品类型：{{data.tab_nav_name}}
			</view>
			<view class="h20"></view>
			<view class="tags">
				快递方式：{{ data.express_type == 1 ? '到店使用' : data.express_type == 2 ? '送货上门' : '快递邮寄' }}
			</view>
			<view class="h20" v-if="data.express_type == 1"></view>
			<view class="tags" v-if="data.express_type == 1">
				店铺地址：{{ data.city }} {{ data.area }} {{ data.address }}
			</view>
			<view class="h20" v-if="data.reason_return == 1"></view>
			<view class="tags" v-if="data.reason_return == 1">
				官方保障：7天无理由
			</view>
			
		</view>

		<view class="liner"></view>

		<!-- <view class="technician" v-if="data.kefu == 1">
			<view class="content_title">选择服务人员</view>
			<scroll-view :scroll-x="true" @scrolltolower="onReach">
				<view class="list flex_center">
					<view class="item flex_c" v-for="(item,index) in list" :key="index" @click="select_id = item.id"
						:id="select_id == item.id ? 'select' : ''">
						<view class="avatar">
							<image :src="item.avatar" mode="aspectFill"></image>
							<view class="select flex_r_around">
								<u-icon name="checkbox-mark" size="28rpx" color="#FFF"></u-icon>
							</view>
						</view>
						<text class="nickname hidden">{{ item.nickname || '' }}</text>
						<text class="juli hidden">{{ item.juli_str }}</text>
					</view>
					<view class="loading" v-if="total > list.length && total != 0">
						<u-loading-icon mode="semicircle" size="36rpx"></u-loading-icon>
					</view>
				</view>
			</scroll-view>
		</view> -->

		<view class="content">
			<view class="content_title flex_center">
				<text @click="detail_tab = 1" :id="detail_tab == 1 ? 'select' : ''">商品详情</text>
				<!-- <text @click="detail_tab = 2" :id="detail_tab == 2 ? 'select' : ''" v-if="data.kefu == 1">下单须知</text> -->
				<!-- <text @click="detail_tab = 3" :id="detail_tab == 3 ? 'select' : ''">所属店铺</text> -->
			</view>
			<view class="block" v-if="detail_tab == 1">
				<view class="content_text">
					<rich-text :nodes="data.content"></rich-text>
				</view>

				<!-- @click="$util.previewImage(data.content_images , index)" -->
				<image :src="item" mode="widthFix" v-for="(item,index) in data.content_images" :key="index"></image>
			</view>


			<view class="block" v-if="detail_tab == 2">
				<view class="rich_content">
					<view class="rich_text red">
						下单后技师将于20分钟至1小时内到达服务地点，请耐心等等待。
					</view>
					<br />
					<view class="rich_text">用户下单须知（请仔细阅读）</view>
					<br />
					<view class="rich_title">一、关于上门按摩圈：</view>
					<view class="rich_text">
						按摩圈仅提供合法正规、健康绿色的上门按摩服务，为商家、技师和用户提供推拿按摩信息的匹配撮合服务。所有项目均为保健养生类服务，不含任何医疗性质。如需治疗，请到指定的机构进行就诊。暂不为高龄(满60周岁)、骨质疏松及孕期客户提供按摩服务。
					</view>
					<br />
					<view class="rich_title">二、责任声明</view>
					<view class="rich_text">1、您在接受按摩服务过程中应遵守下列规定：</view>
					<view class="rich_text">（1）不得向技师人员提出违反法律法规的服务要求；</view>
					<view class="rich_text">（2）不得诱导、强迫技师人员提供非平台中的服务；</view>
					<view class="rich_text">（3）不得对技师人员的人身安全造成损害，不得对技师人员进行语言攻击、侮辱等；</view>
					<view class="rich_text">2、您知悉了解并同意，您使用按摩圈所存在的风险以及产生的一切后果将完全由其您与技师人员承担，往约不承担任何责任。</view>
					<br />
					<view class="rich_title">三、用户下单须知</view>
					<view class="rich_text">1.下单需先付定金50元，技师到达后再付技师路费和尾款。技师到达后打开订单页面，
						点击支付尾款，尾款=项目金额-50+技师路费，路费以技师打车实际费用为准。</view>
					<view class="rich_text">2.用户下单付款后30分钟内商家未接单，可选择申请退款，订单款项将全额原路返回账户。</view>
					<view class="rich_text">3.用户下单付款后，技师将联系用户确认订单，双方沟通没有问题技师才会出发。</view>
					<view class="rich_text">4.商家一旦接单，用户不能随意取消订单。如接单后需要取消服务的，将进行扣款或退款处理。</view>
					<view class="rich_text">（1）因用户原因要取消服务的，如技师未出发，将全额退还用户 </view>
					<view class="rich_text">（2）因用户原因要取消服务的，如技师已出发，扣除项目费金额10%作为手续费，扣除技师往返路费，扣除技师误工费50元，剩余款项退还用户。</view>
					<view class="rich_text">5、如用户对技师或者服务不满意，需要在服务开始前拒绝服务，服务开始后，用户不能以任何理由要求退款。</view>
					<view class="rich_text">
						6、若技师到达指定预约地点，因用户原因无法开始服务，技师将在等待30分钟后自行离开，订单视为服务完成，不做任何退款处理；在服务过程中，若因用户原因提前结束服务，将视同本次服务完成，不做任何退款处理。
					</view>
					<view class="rich_text">
						7、平台所有服务费用都是明码标价，如技师索要除路费的其它额外费用，用户有权拒绝(用户主动给予的除外)，如遇服务质量问题，或技师未完成服务就提前离开(征得用户同意的除外)，可保留相关证据联系平台进行投诉。
					</view>
					<view class="rich_text">8、切勿与技师发生私下交易或者帮助技师跑单，一旦发生任何交易纠纷和财产损失等与本平台无关。</view>
					<br />
					<view class="rich_text">声明：平台仅监督商家的服务质量和资质，提倡绿色健康按摩，如遇技师提供非法服务或技师图片与本人不符，超出本平台监管范畴），请您直接报警处理！</view>
				</view>
			</view>

			<view class="block" v-if="detail_tab == 3">
				<view class="store flex_center">
					<view class="store_avatar">
						<image :src="storeInfo.avatar" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="text flex_center">
							<text class="hidden">{{ storeInfo.store_name }}</text>
							<image :src="$util.prefix('public/qiye_icon.png')" mode="aspectFill"
								@click="$util.previewImage([storeInfo.business_license_img])"></image>
						</view>
						<view class="signature hidden_3">
							{{ storeInfo.company_name || '' }}
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="btn_bottom flex_r_between">
			<view class="icon_list flex_center">
				<!-- <view class="icon_item flex_c" @click="$native.toStore(data.store_id)">
					<image :src="$util.prefix('store/product_store_icon.png')" mode="aspectFill"></image>
					<text>店铺</text>
				</view> -->
				<!-- <view class="icon_item flex_c"
					@click="$util.toUrl(`/pages/create/kefu?store_id=${data.store_id}&circle_id=${data.circle_id}`)">
					<image :src="$util.prefix('store/product_kefu_icon.png')" mode="aspectFill"></image>
					<text>客服</text>
				</view> -->
			</view>

			<view class="btn" @click="toCeate">立即购买</view>
		</view>

		<u-popup :show="show_share" @close="show_share = false" mode="bottom" bgColor="transparent">
			<view class="share_modal">
				<view class="share_header flex_r_between">
					<text>最近联系人</text>
					<view class="share_icon flex_r_around" @click="show_share = false">
						<u-icon name="close" color="#131313" size="18rpx"></u-icon>
					</view>
				</view>

				<view class="share_list">
					<scroll-view scroll-x="true">
						<view class="flex_center">
							<view class="item flex_c" v-for="(item,index) in people_list" :key="index"
								@click="shareProductInset(item)">
								<image :src="item.chat_avar" mode="aspectFill"></image>
								<text class="hidden">{{ item.chat_name || '' }}</text>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="share_plaform">
					<scroll-view scroll-x="true">
						<view class="flex_center">
							<view class="item flex_c" @click="shareByWechat">
								<image :src="$util.prefix('public/weixin.png')"></image>
								<text>微信</text>
							</view>
						</view>
					</scroll-view>
				</view>

			</view>
		</u-popup>

	</view>

	<view class="loading flex_c" v-else-if="!no_product && !data.id">
		<HevuLoading type="loading4" :opacity="0" loadingText="加载中..." text-color="#FD2A53"
			loadingIconColor="#FD2A53" />

		<view class="back_btn" @click="back">
			返回
		</view>
	</view>

	<view v-else>
		<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);">
			<uni-nav-bar color="#333" left-icon="left" title="商品已下架" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>
		<view class="empty" style="padding: 60rpx 0;">
			<u-empty text="商品已下架" mode="list" :icon="$util.prefix('public/empty.png')">
			</u-empty>
		</view>
	</view>


</template>

<script>
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	export default {
		components: {
			HevuLoading
		},

		watch: {
			lat(newVal, oldVal) {
				// this.getDetail();
			},
		},
		
		data() {
			return {
				trans: 0,
				data: {},
				goods_id: 0,
				current: 0,

				// 客服
				list: [],
				page: 1,
				total: 0,


				select_id: 0,

				popularize_id: 0,

				from_web: 0,

				no_product: false,


				lat: '',
				lng: '',
				province: '',
				city: '',
				area: '',

				text_list: [
					'下单先付50定金，技师到达后再付技师路费和尾款。技师到达后打开订单页面，点击支付尾款，加上技师路费后支付即可。',
					'路费都以技师实际出发的路程为主，平台显示距离是用户和技师的直线距离。',
					'如有技师或商家参与黄赌毒等违法犯罪活动，请及向举报或报警处理。',
					'免单活动：凡在下单用户，在结束订单后可以获得抽奖机会一次，最高可获得1000元，最低获得20元（具体查看免单活动详情）。',
					'如有技师要求下单，加钟线下支付，请予以拒绝并举报，举报核实有效送购物卡。',
				],


				detail_tab: 1,

				storeInfo: {},

				provider_id: 0,

				show_share: false,

				people_list: [],

				circle_id: 0,
			}
		},
		
		methods: {

			back() {
				if (this.from_web) {
					this.$util.back();
				} else {
					this.$native.backAction();
				}
			},

			getDetail() {
				this.$get(`/store_goods/getGoodsInfo`, {
					goods_id: this.goods_id,
					circle_id: this.circle_id
				}).then(res => {
					this.data = res.data;
					if (!this.data.id) {
						this.no_product = true;
					}

					if (!this.circle_id || this.circle_id == 0) {
						this.circle_id = res.data.circle_id || 0;
					}

					if (this.data.kefu == 1) {
						this.getList(true);
					}

					this.getStoreInfo(this.data.store_id)
				});
			},

			getStoreInfo(store_id) {
				this.$get('/store/getStoreInfo', {
					store_id: store_id
				}).then(res => {
					this.storeInfo = res.data;
				})
			},

			change(e) {
				this.current = e.detail.current;
			},

			toCeate() {
				// if (this.data.kefu == 1 && (!this.select_id || this.select_id == '0')) {
				// 	return this.$util.msg('请选择服务人员');
				// }

				this.$util.toUrl(
					`/pages/create/create?goods_id=${this.data.id}&provider_id=${this.select_id}&store_id=${this.data.store_id}&popularize_id=${this.popularize_id}&kefu=${this.data.kefu}&circle_id=${this.circle_id}`
				);
			},

			getLocation(json) {
				var data = JSON.parse(json);
				this.lat = data.lat || '';
				this.lng = data.lng || '';
				this.province = data.province || '';
				this.city = data.city || '';
				this.area = data.area || '';
				uni.setStorageSync('location', data);
				if (this.lat) {
					this.$nextTick(() => {
						this.getList(true);
					});
				}
			},

			getList(flag) {
				if (flag) {
					this.page = 1;
				}
				this.$get('/provider/getProviderList', {
					store_id: this.data.store_id,
					page: this.page,
					lng: this.lng,
					lat: this.lat,
					// province: this.province,
					// city: this.city,
					// area: this.area,
					// share_user_id: this.share_user_id,
					provider_id: this.provider_id,
					circle_id: this.circle_id,
					type: 2
				}).then(res => {
					if (flag) {
						this.list = res.data.data;
					} else {
						this.list.push(...res.data.data);
					}
					this.total = res.data.total;
					if (this.page == 1 && this.list.length) {
						this.select_id = this.list[0].id;
					}
				});
			},

			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList(false);
				}
			},

			onShare() {
				this.show_share = true;
			},

			shareByWechat() {
				if (!this.data.name) {
					return this.$util.msg('数据加载中,请稍后');
				}
				this.$post('/user/info').then(res => {
					var url = this.$util.getUrl(
						`/pages/create/productShare?goods_id=${this.goods_id}&pid=${res.data.id}`);
					this.$native.toShareUrl({
						url: url,
						avatar: this.data.goods_image[0],
						name: this.data.name,
						sign: this.data.content,
					});
				})
			},

			shareProductInset(item) {
				if (item.chat_type == 1) {
					this.$native.shareProductInset({
						image: this.data.image,
						name: this.data.name,
						content: this.data.content,
						price: this.data.price,
						user_id: item.chat_c2c_id,
						chat_type: item.chat_type,
						goods_id: this.data.id,
					})
				} else {
					this.$native.shareProductInset({
						image: this.data.image,
						name: this.data.name,
						content: this.data.content,
						price: this.data.price,
						group_id: item.chat_group_id,
						chat_type: item.chat_type,
						goods_id: this.data.id,
					})
				}
			},

			getSharePeople(data) {
				try {
					this.people_list = JSON.parse(data);
				} catch (err) {
					console.log(err);
				}
				// this.people_list = data;
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			window.getLocation = this.getLocation;
			window.getSharePeople = this.getSharePeople;
			this.$native.getLocation();
			this.$native.getSharePeople();
			this.goods_id = option.goods_id;
			this.share_user_id = option.share_user_id || 0;
			this.popularize_id = option.popularize_id || 0;
			this.select_id = option.provider_id || 0;
			this.provider_id = option.provider_id || 0;
			this.circle_id = option.circle_id || 0;
			this.from_web = option.from_web || 0;
			this.getDetail();
		},

		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop <= 200) {
				this.trans = e.scrollTop / 200;
			} else {
				this.trans = 1
			}
		},
	}
</script>

<style lang="less" scoped>
	.loading {
		padding-top: 10vh;

		.back_btn {
			width: 560rpx;
			height: 100rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin-top: 64rpx;
		}
	}

	.product {
		background: #FFF;
		min-height: 100vh;
		padding-bottom: 130rpx;
	}

	.header_banner {
		width: 100vw;
		height: 100vw;

		position: relative;

		.swiper-box {
			width: 100vw;
			height: 100vw;

			swiper-item {
				width: 100vw;
				height: 100vw;

				image {
					width: 100vw;
					height: 100vw;
				}
			}
		}

		.current {
			position: absolute;
			right: 32rpx;
			bottom: 30rpx;
			height: 38rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 20rpx;
			padding: 0 12rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 38rpx;
		}
	}

	.banner_preview {
		margin: 32rpx;

		.banner_list {
			image {
				flex-shrink: 0;
				width: 96rpx;
				height: 96rpx;
				border-radius: 16rpx;
				margin-right: 16rpx;
				border: 4rpx solid transparent;
			}
		}

		#select {
			border: 4rpx solid #FD2A53;
		}
	}

	.goods_name_view {
		padding: 0 32rpx;

		.goods_name {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
		}

		.price {
			padding: 32rpx 0 0;

			.price_text {
				i {
					font-size: 36rpx;
					font-style: normal;
				}

				font-weight: 600;
				font-size: 48rpx;
				color: #FD2A53;
				line-height: 48rpx;

				.vip-tags {
					background: linear-gradient(to right, #BB7B22, #EBBA76);
					width: 90rpx;
					height: 38rpx;
					border-radius: 0 16rpx 0 16rpx;
					font-size: 24rpx;
					line-height: 32rpx;
					text-align: center;
					color: #FFFFFF;
					font-weight: normal;
					margin-left: 18rpx;
				}
			}

			.order_num {
				font-size: 24rpx;
				color: #999999;
			}
		}

		.old-price {
			font-size: 28rpx;
			color: #666666;
			margin-top: 32rpx;
		}

	}

	.goods_tags_view {
		padding: 0 32rpx;

		.tags {
			font-size: 28rpx;
			color: #666666;
		}

		.h20 {
			height: 20rpx;
		}
	}

	.liner {
		width: 100vw;
		height: 16rpx;
		background: #F1F1F1;
		margin: 40rpx 0 32rpx;
	}

	.technician {
		padding: 0 32rpx 80rpx;

		.content_title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			margin-bottom: 32rpx;
		}

		.list {
			#select {
				.avatar {
					border: 4rpx solid #FD2A53;
				}

				.select {
					display: flex;
				}

				text {
					color: #FD2A53;
				}

			}

			.item {
				margin-right: 24rpx;
				border: 4rpx solid transparent;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					position: relative;
					overflow: hidden;
					border-radius: 60rpx;
					border: 4rpx solid transparent;

					image {
						width: 112rpx;
						height: 112rpx;
						background: #D8D8D8;
					}

					.select {
						width: 112rpx;
						height: 32rpx;
						border-radius: 0 0 56rpx 56rpx;
						background: #FD2A53;
						position: absolute;
						bottom: 0;
						left: 0;
						display: none;
					}
				}

				.nickname {
					font-size: 28rpx;
					color: #131313;
					margin-top: 18rpx;
				}

				.juli {
					font-size: 24rpx;
					color: #666;
					margin-top: 8rpx;
				}
			}
		}
	}

	.content {

		.content_title {
			align-items: flex-end;
			padding: 0 32rpx;

			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #CCCCCC;
				line-height: 44rpx;
				padding-right: 48rpx;
			}

			#select {
				font-weight: 500;
				font-size: 32rpx;
				color: #131313;
				line-height: 44rpx;
			}

			view {
				i {
					font-style: normal;
					font-size: 32rpx;
					color: #666;
					line-height: 40rpx;
				}
			}
		}

		.content_text {
			padding: 0 32rpx;
			font-size: 28rpx;
			color: #666666;
			margin: 20rpx 0 32rpx;
		}

		image {
			width: 100vw;
		}

	}

	.btn_bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 132rpx;
		padding: 0 32rpx 32rpx;
		background: #FFFFFF;

		.icon_list {
			.icon_item {
				margin-right: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					margin-top: 8rpx;
					font-size: 26rpx;
					color: #999999;
					line-height: 26rpx;
				}
			}
		}

		.btn {
			width: 240rpx;
			height: 80rpx;
			background: #FD2A53;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.circle {
		padding: 60rpx 0 0;
		background: linear-gradient(45deg, #FFDBF6, #AB6FF8);

		.item {
			width: 670rpx;
			padding: 32rpx 24rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			margin-bottom: 20rpx;

			text {
				width: 56rpx;
				height: 56rpx;
				background: #7B52FF;
				border-radius: 28rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
				margin-right: 16rpx;
			}

			view {
				flex: 1;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}

		}

		.title {
			width: 320rpx;
			height: 96rpx;
			margin-bottom: 48rpx;

			image {
				width: 320rpx;
				height: 96rpx;
			}
		}
	}

	.rich_content {
		border-top: 2rpx solid #F1F1F1;
		padding: 40rpx 32rpx;
		margin-top: 40rpx;

		.rich_text {
			font-size: 28rpx;
			color: #333333;
			line-height: 56rpx;
		}

		.rich_title {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 44rpx;
		}

		.red {
			font-weight: 500;
			font-size: 28rpx;
			color: #FD2A53;
			line-height: 56rpx;
		}
	}

	.store {
		padding: 40rpx 34rpx;
		overflow: hidden;

		.store_avatar {
			width: 144rpx;
			height: 144rpx;
			overflow: hidden;
			border-radius: 16rpx;
			background: #D8D8D8;
			margin-right: 18rpx;

			image {
				width: 144rpx;
				height: 144rpx;
			}
		}

		.info {
			flex: 1;

			.text {
				overflow: hidden;
				margin-bottom: 12rpx;

				text {
					max-width: 400rpx;
					font-size: 32rpx;
					color: #131313;
					line-height: 32rpx;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 8rpx;
				}
			}

			.signature {
				font-size: 28rpx;
				color: #666666;
				line-height: 32rpx;
			}

		}
	}

	.share_modal {
		width: 100vw;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 36rpx 32rpx 120rpx;

		.share_header {
			text {
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
			}

			.share_icon {
				width: 48rpx;
				height: 48rpx;
				background: #F1F1F1;
				border-radius: 24rpx;
			}
		}

		.share_list {
			width: 100%;
			overflow: hidden;
			margin: 48rpx 0 64rpx;

			scroll-view {
				width: 100%;
			}

			.item {
				margin-right: 40rpx;

				image {
					width: 112rpx;
					height: 112rpx;
					border-radius: 56rpx;
				}

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					line-height: 34rpx;
					max-width: 112rpx;
					margin-top: 16rpx;
				}
			}
		}

		.share_plaform {
			width: 100%;
			overflow: hidden;

			scroll-view {
				width: 100%;
			}

			.item {
				margin-right: 40rpx;

				image {
					width: 112rpx;
					height: 112rpx;
					border-radius: 56rpx;
				}

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					line-height: 34rpx;
					max-width: 112rpx;
					margin-top: 16rpx;
				}
			}
		}
	}
</style>